export const titleColor = "#000";
export const axisLineColor = "#d9d9d9";
export const axisLabelColor = "#8c8c8c";
export const colors = [
  "#038afe",
  "#1ddfc9",
  "#4346d3",
  "#f7517f",
  "#50f4f0",
  "#f8c02d",
  "#00e53f",
  "#73ffa1",
  "#ef6b6f",
  "#c1b2ff",
  "#40b5f6",
];
export const seriesColor = [
  "#5470c6",
  "#91cc75",
  "#fac858",
  "#ff7070",
  "#73c0de",
];
export const tooltipBgColor = "#2f3c4f";
export const lineLinearColor = [
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "rgba(0, 155, 250, 0.5)",
      },
      {
        offset: 1,
        color: "rgba(0, 155, 250, 0.01)",
      },
    ],
    global: false,
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "rgba(67, 70, 211, 0.5)",
      },
      {
        offset: 1,
        color: "rgba(67, 70, 211, 0.01)",
      },
    ],
    global: false,
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "rgba(29, 223, 201, 0.5)",
      },
      {
        offset: 1,
        color: "rgba(29, 223, 201, 0.01)",
      },
    ],
    global: false,
  },
];

interface TooltipParam {
  name: string;
  [key: string]: any;
}
export const tooltipFormatter = (unit?: string) => {
  return (params: Array<TooltipParam> | TooltipParam) => {
    if (!Array.isArray(params)) {
      // 如果是对象，则放到数组中
      params = [params];
    }
    if (Array.isArray(params) && params.length === 0) {
      return;
    }

    const tdStyle = `padding: 5px;`;
    const markerTdStyle = `padding: 5px;`;
    const markerWidth = `10px`;
    const markerStyle = `display:inline-block;border-radius:${markerWidth};width:${markerWidth};height:${markerWidth};`;

    let t = `<table style="text-align: center">`;
    const tHeader = `<tr><th colspan="3" style="${tdStyle}">${params[0].name}</th></tr>`;
    const tBody = params
      .map((item: TooltipParam) => {
        const marker = `<span style="${markerStyle}background-color:${item.color};"></span>`;
        let value = item.value;
        // eslint-disable-next-line no-self-compare
        value = Number(value) === Number(value) ? value + (unit || "") : value; // 如果是数字，就加unit单位，否则直接展示
        return `<tr>
                                            <td style="${markerTdStyle}">${marker}</td>
                                            <td style="${tdStyle}text-align:left;">${item.seriesName}</td>
                                            <td style="${tdStyle}font-weight: bold;text-align:left;">${value}</td>
                                        </tr>`;
      })
      .join("");
    t = t + `${tHeader}${tBody}</table>`;
    return t;
  };
};
